<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix ListBox with option children</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/ListBox.js"></script>
  </head>

  <body role="main">
    <div class="demo medium">
      <elix-list-box aria-label="Fruits" style="height: 100%;">
        <option>Acai</option>
        <option>Acerola</option>
        <option>Apple</option>
        <option>Apricot</option>
        <option>Banana</option>
        <option>Blackberry</option>
        <option>Blueberry</option>
        <option>Cantaloupe</option>
        <option>Cherry</option>
        <option>Cranberry</option>
        <option>Currant</option>
        <option>Date</option>
        <option>Durian</option>
        <option>Fig</option>
        <option>Goji berry</option>
        <option>Gooseberry</option>
        <option>Grape</option>
        <option>Grapefruit</option>
        <option>Honeydew</option>
        <option>Jackfruit</option>
        <option>Kiwi</option>
        <option>Kumquat</option>
        <option>Lemon</option>
        <option>Lime</option>
        <option>Lychee </option>
        <option>Mango</option>
        <option>Mangosteen</option>
        <option>Mulberry</option>
        <option>Nectarine</option>
        <option>Orange</option>
        <option>Papaya</option>
        <option>Passion Fruit</option>
        <option>Peach</option>
        <option>Pear</option>
        <option>Pineapple</option>
        <option>Plum</option>
        <option>Pomegranate</option>
        <option>Pomelo</option>
        <option>Prickly Pear</option>
        <option>Raspberry</option>
        <option>Strawberry</option>
        <option>Tangerine</option>
        <option>Watermelon</option>
      </elix-list-box>
    </div>
  </body>
</html>
